<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 1.“交集”选择符 */
			p {
				font-size: 14px;
				color: #00f;
				text-decoration: underline;
			}
			
			.myContent {
				font-size: 20px;
				text-decoration: none;
				border: 1px solid #c00;
			}

			/* 2.“并集”选择符 */
			h1,
			h2,
			h3 {
				color: purple;
			}

			h2.special,
			#one {
				text-decoration: underline;
			}

			/* 3.“后代”选择符 */
			h4 em {
				color: aqua;
			}

			div p {
				color: #c00;
			}

			h4 {
				color: aqua;
			}


			/* 4.子元素选择符 */
			h5>strong {
				color: red;
			}

			ul>b {
				color: lawngreen;
			}

			span>input {
				font-size: 10px;
				color: aquamarine;
			}

			/* 5.相邻兄弟选择符 */
			h6+p {
				color: blueviolet;
			}
			
			/* 6.兄弟选择符 */
			div~p {
				background-color: royalblue;
			}
		</style>
	</head>
	<body>
		<!-- 1.“交集”选择符 -->
		<p>1."交集"选择器示例</p>
		<p class="myContent">2."交集"选择器示例</p>
		<p>3."交集"选择器示例</p>

		<!--2.“并集”选择符  -->
		<div>
			<h1>小美装修</h1>
			<h2 class="special">公司介绍</h2>
			<h3>人民对美好生活的向往，就是我们的奋斗目标</h3>
			<h4 id="one">返回</h4>
		</div>

		<!--3.“后代”选择符  -->
		<h4>css<em>基础</em>知识</h4>
		<h4>css基础知识</h4>
		<p>css<em>选择符</em>包括基本选择符、通配符选择和复合选择符</p>

		<!--4.子元素选择符 -->
		<h5>我是张<strong>小</strong><strong>小</strong>！</h5>
		<h5>我是张<em><strong>小小</strong></em>！</h5>
		<div>
			<ul>
				<b>aa</b>
				<li>星期一</li>
				<li>星期二</li>
				<p>ul-li</p>
				<b>aa</b>
				<span>
					username:<input type="text" placeholder="用户名" />
				</span>
			</ul>
			<p>p元素</p>
			<ol>
				<li>
					<p>ol-li</p>
				</li>
			</ol>
		</div>

		<!-- 5.相邻兄弟选择符 -->

		<h6>5.相邻兄弟选择符--h3</h6>
		<p>5.相邻兄弟选择符--p</p>

		<!-- /* 6.兄弟选择符 */ -->
		<div>
			<p>p1</p>
			<span>
				<p>span-p</p>
			</span>
			<p>p2</p>
		</div>
		
	</body>
</html>